<template>
  <div class="header">
    <div class="title line_height">{{ title }}</div>
    <div class="time line_height">{{ time }}</div>
  </div>
</template>

<script setup lang="ts">
import formatDate from "@/utils/formatDate"
import { watchEffect, ref } from "vue"
const props = defineProps<{
  title: string
}>()
let title = props.title
let time = ref()
const getDate = () => {
  time.value =
    formatDate(new Date(), "YYYY-MM-DD HH:MM:SS") +
    " " +
    formatDate(new Date(), "weekDay")
}
setInterval(() => {
  getDate()
}, 1000)
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  color:#fff;
  border-bottom: 1px solid #4b9095;
  .line_height {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin:0 16px;
  }
  .title {
    font-size: 24px;
    font-weight: 600;
  }
  .time {
    font-size: 16px;
    font-weight: 600;
  }
}
</style>
